<template>
    <div>

        <!-- 字符串写法适用于：类名不确定，要动态获取 -->
        <div class="basic" :class="mode" @click="changeMode">
            <p> {{ msg }} </p>
        </div>

        <!-- 数组写法 适用于绑定样式个数不确定名字也不确定 -->
        <div class="basic" :class="classList" @click="addClass">
            <p> {{ msg }} </p>
        </div>

        <!-- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 -->
        <div class="basic" :class="objCSS">
            <p> {{ msg }} </p>
        </div>

        <div class="basic" :style="styleCss">
            <p> {{ msg }} </p>
        </div>

    </div>
</template>

<script>
export default {
    name: 'HelloStyle',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            mode: 'normal',
            classList: ['bigfont','radius'],
            objCSS:{
                bigfont : false,
                radius : true
            },
            styleCss:{
                color: 'red'
            }
        }
    },
    methods: {
        changeMode() {
            if (this.mode === 'normal') {
                this.mode = 'special'
            } else {
                this.mode = 'normal'
            }

        },
        addClass(){
            this.classList.push('normal')
        }
    }
}
</script>

<style scoped>
.basic {
    align-items: center;
    cursor: pointer;
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    margin-top: 10px;
}

.normal {
    background-color: aquamarine;
}

.special {
    background-color: red;
}

.bigfont {
    font-size: 20px;
    text-shadow: 2px 2px 2px #000;

}

.radius {
    border-radius: 20px;
}
</style>